<template>
  <div class="col q-ma-xs column">
    <q-card class="col column q-pa-xs no-wrap">
      <div class="text-subtitle1 text-center q-py-sm">组件设置</div>
      <q-separator class="q-mb-sm" />
      <select-tree prefix="选择组件：" v-model="config.cmpName" :treeList="treeList" />
      <span>组件配置：</span>
      <q-input
        dense
        filled
        type="textarea"
        v-model="config.config"
        class="q-my-sm"
        input-class="text-left"
      />
    </q-card>
  </div>
</template>

<script>
import SelectTree from 'components/form/select-tree-with-list';

export default {
  name: 'customsetting',
  components: { SelectTree },
  data() {
    return {
      selected: {},
      expanded: [],
      cmpName: '',
      treeList: [
        {
          label: '柱状图',
          selectable: false,
          children: [
            { label: '3D柱状图', value: 'bar3dcolor' },
            { label: '3D柱状图透明', value: 'bar3dtran' },
            { label: '方柱', value: 'bar3dsqrt' },
            { label: '立体柱', value: 'bar3d' },
            { label: '圆柱状图', value: 'barcircle' },
            { label: '圆柱状图2', value: 'barcircle2' },
            { label: '圆柱状图3', value: 'barcircle3' },
            { label: '圆柱状图4', value: 'barcircle4' },
            { label: '圆柱状图5', value: 'barcircle5' },
            { label: '双圆柱状图1', value: 'barcircledouble1' },
            { label: '双圆柱状图2', value: 'barcircledouble2' },
            { label: '水平柱', value: 'barpictorial' },
            { label: '水平圆柱', value: 'barpictorial1' },
            { label: '磁盘容量', value: 'bardoublecircle' },
            { label: '彩柱', value: 'barcolorful' },
            { label: '单柱', value: 'barone' },
            { label: '三角柱', value: 'bartriangle' },
            { label: '阴影柱', value: 'barshaddle' },
            { label: '双横柱', value: 'bardouble' },
            { label: '横柱', value: 'barhorizontal' },
            { label: '渐变柱', value: 'barinfographic' },
            { label: '柱线', value: 'barline' },
            { label: '方柱顶圆点', value: 'barsquare' },
            { label: '方柱1', value: 'barsquare1' },
            { label: '曲顶柱状图', value: 'pictorialbar' },
            { label: '排名柱状图', value: 'barsort' },
            { label: '电池柱', value: 'barbattery' },
            { label: '电池柱2', value: 'barbattery2' },
            { label: '分组柱', value: 'bargroup' },
            { label: '测速', value: 'barspeed' },
            { label: '项目工期', value: 'barproject' },
          ],
        },
        {
          label: '饼状图',
          selectable: false,
          children: [
            { label: '3D饼图', value: 'pie3d' },
            { label: '3D环图', value: 'pie3d2' },
            { label: '好看饼图', value: 'piecolor' },
            { label: '双环图', value: 'piedouble' },
            { label: '四环', value: 'piefour' },
            { label: '五环', value: 'piefive' },
            { label: '六环', value: 'piesix' },
            { label: '内外环', value: 'piegroup' },
            { label: '普通环图', value: 'pienormal' },
            { label: '滚动球', value: 'pierunning' },
            { label: '滚动环', value: 'gaugerunning' },
            { label: '双环星图', value: 'piestar' },
            { label: '三个百分比', value: 'piethree' },
            { label: '三个百分比2', value: 'piethree2' },
            { label: '两个百分比', value: 'pietwo' },
            { label: '进度', value: 'pieprocess' },
            { label: '进度黄色', value: 'pieyellow' },
            { label: '饼图发散', value: 'piefan' },
            { label: '占比', value: 'piepercent' },
            { label: '花瓣图', value: 'pieflower' },
            { label: '饼图阴影', value: 'pieshadow' },
          ],
        },
        {
          label: '散点图',
          selectable: false,
          children: [
            { label: '普通散点图', value: 'scattercommon' },
            { label: '散点3D', value: 'scatter3d' },
            { label: '散点环形', value: 'scattercircle' },
          ],
        },
        {
          label: '折线图',
          selectable: false,
          children: [
            { label: '区间线', value: 'linerange' },
            { label: '线点图', value: 'linepoint' },
            { label: '3D折线图', value: 'customline3d' },
            { label: '3D风向', value: 'customwind3d' },
            { label: '地铁图', value: 'subway' },
          ],
        },
        {
          label: '地图',
          selectable: false,
          children: [
            { label: '飞机', value: 'customplane' },
            { label: '流量图', value: 'custommapll' },
            { label: '迁徙地图', value: 'mapmove' },
            { label: '北京地图', value: 'mapbeijing' },
            { label: '江苏地图', value: 'mapjs' },
            { label: '山东地图', value: 'mapshandong' },
          ],
        },
        {
          label: '热力图',
          selectable: false,
          children: [
            { label: '热力周', value: 'customheatweek' },
            { label: '热力年', value: 'customheatyear' },
          ],
        },
        {
          label: '自定义图形',
          selectable: false,
          children: [
            { label: '老鼠', value: 'mouse' },
            { label: '温度', value: 'temperature' },
            { label: '报表', value: 'graphtable' },
          ],
        },
        {
          label: '词云图',
          selectable: false,
          children: [
            { label: '词云', value: 'wordcloud' },
          ],
        },
        {
          label: '桑基图',
          selectable: false,
          children: [
            { label: '桑基图', value: 'sankeycom' },
          ],
        },
        {
          label: '关系图',
          selectable: false,
          children: [
            { label: '数据流向', value: 'relationline' },
            { label: '拓扑图', value: 'structure' },
            { label: '关系云', value: 'cloud' },
            { label: '链路拓扑图', value: 'linker' },
            { label: '流程图', value: 'flow' },
          ],
        },
      ],
      cmpMap: {},
    };
  },
  props: {
    config: {
      type: Object,
      required: true,
    },
  },
  methods: {
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
};
</script>

<style lang="stylus" scoped></style>
